/*
 * @Author: 肖思汗 
 * @Date: 2025-07-01 22:08:07 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2025-08-29 21:31:22
 */

import { Close } from "@nutui/icons-react-taro";
import clsx from "clsx";
import { observer } from "mobx-react-lite";
import { ReactNode } from "react";
import utils from "src/utils/utils";
import utilsStore from "src/utils/utilsStore";
import centerAlignStore from "../CenterAlign/centerAlignStore";
import HalignSVG from "../CenterAlign/img/H-align.svg";
import changeLayerStore from "../ChangeLayer/changeLayerStore";
import cropEditor from "../CropModel/cropEditor";
import cropModelStore from "../CropModel/cropModelStore";
import designerRender from "../Designer/designerRender";
import designerStore from "../Designer/designerStore";
import fineTuningStore from "../FineTuning/FineTuningStore";
import flipStore from "../Flip/FlipStore";
import leftTopStore from "../LeftTop/leftTopStore";
import maskModelStore from "../MaskModel/maskModelStore";
import copySVG from "../ObjectsBtns/img/copy.svg";
import fineTuningSVG from "../ObjectsBtns/img/fineTuning.svg";
import horizontalFlipSVG from "../ObjectsBtns/img/horizontalFlip.svg";
import styles from "./imageModel.module.less";
import imageModelStore from "./imageModelStore";
import animeSVG from "./img/anime.svg";
import cropIconSVG from "./img/cropIcon.svg";
import maskIconSVG from "./img/maskIcon.svg";

import cutoutModelStore from "../CutoutModel/CutoutModelStore";
import cutoutSVG from "./img/cutout.svg";

interface Iprops {
    children?: ReactNode
}

// 图片编辑功能
const ImageModel = observer(() => {

    if (
        !designerStore.activeObjectId ||
        !["image", "Image"].includes(designerStore.activeObjectType)
    ) {
        imageModelStore.setShow(false);
    }

    return (
        <div
            className={clsx(
                styles.imageModel,
                !leftTopStore.showColorPicker &&
                !centerAlignStore.show &&
                !fineTuningStore.show &&
                !flipStore.show &&
                !changeLayerStore.show &&
                !maskModelStore.show &&
                !cropModelStore.show &&
                !cutoutModelStore.show &&
                Boolean(designerStore.activeObjectId) &&
                designerStore.activeObjectType === "image" &&
                styles.show
            )}
            style={{
                paddingBottom: utilsStore.safeAreaBottom || utils.rpx2px(20)
            }}
        >
            <div className={styles.scroll} >

                {
                    [
                        {
                            icon: cropIconSVG,
                            text: "裁剪",
                            onclick: () => {
                                console.log("裁剪");
                                const activeObject = designerRender.getActiveObject();
                                // 如果是图片
                                if (activeObject.type === "image") {
                                    cropModelStore.setShow(true);
                                    cropEditor.setImage({
                                        url: activeObject.getSrc(),
                                        cropX: activeObject.cropX,
                                        cropY: activeObject.cropY,
                                        width: activeObject.width,
                                        height: activeObject.height,
                                        clipPath: activeObject.clipPath ? activeObject.clipPath.toJSON() : undefined,
                                    });
                                }
                            }
                        },
                        {
                            icon: maskIconSVG,
                            text: "遮罩",
                            onclick: () => {
                                console.log("遮罩");
                                maskModelStore.setShow(true);
                            }
                        },
                        {
                            icon: cutoutSVG,
                            text: "抠图",
                            onclick: () => {
                                cutoutModelStore.setShow(true);
                            }
                        },
                        {
                            icon: animeSVG,
                            text: "动漫化",
                            onclick: () => {
                                designerRender.anime();
                            }
                        },

                        {
                            icon: fineTuningSVG,
                            text: "微调",
                            onclick: () => {
                                console.log("微调");
                                fineTuningStore.setShow(true);
                            }
                        },
                        {
                            icon: horizontalFlipSVG,
                            text: "翻转",
                            onclick: () => {
                                console.log("翻转");
                                flipStore.setShow(true);
                            }
                        },
                        {
                            icon: copySVG,
                            text: "复制",
                            onclick: () => {
                                console.log("复制");
                                designerRender.copy();
                            }
                        },
                        {
                            icon: HalignSVG,
                            text: "居中对齐",
                            onclick: () => {
                                centerAlignStore.setShow(true);
                                console.log("居中对齐");
                            }
                        },
                    ].map((item) => {
                        return (
                            <div
                                className={styles.btns_Item}
                                onClick={item.onclick}
                            >
                                <img src={item.icon} alt="" className={styles.icon} />
                                <span className={styles.btns_Item_Text} >{item.text}</span>
                            </div>
                        )
                    })
                }
            </div>
            <Close
                className={styles.close}
                onClick={() => {
                    designerRender.discardActiveObject();
                    designerRender.requestRenderAll();
                }}
            />

        </div>
    );

});

export default ImageModel;

